<template>
	<div class="yolo">
		<el-row style="margin-bottom: 8px;">
			<el-col>
				<el-button type="danger" icon="delete" @click="deleteAll" :disabled="seletIds.length === 0">批量删除</el-button>
				<el-button type="primary" icon="refresh" @click="reload">刷新</el-button>
			</el-col>
		</el-row>

		<el-table :data="list" border  @selection-change="handleSelectionChange">
			<el-table-column type="selection" align="center"/>
			<el-table-column type="index" align="center"/>
			<el-table-column label="ID" prop="id" align="center"/>
			<el-table-column label="原视频" prop="video_path" align="center"/>
			<el-table-column label="识别结果" prop="result_path" align="center"/>
			<el-table-column label="状态" align="center">
				<template #default="{row}">
					<el-tag :type="row.status === '已完成' ? 'success': 'warning'">{{row.status}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="{row}">
					<el-button type="primary" :disabled="row.status != '已完成'" @click="openDetail(row)">查看</el-button>
					<el-button type="danger" :disabled="row.status != '已完成'" @click="del(row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div style="margin-top: 14px; display: flex; align-items: center; justify-content: flex-end">
			<el-pagination background layout="prev, pager, next, total" :total="total" @current-change="pageChange"/>
		</div>
	</div>


	<el-dialog v-model="show" title="识别结果" width="80%">
		<div class="detail">
			<div class="inner">
				<video :src="`/api${currentRow.video_path}`" controls autoplay/>
			</div>
			<div class="inner">
				<video :src="`/api${currentRow.result_path}`" controls autoplay/>
			</div>
		</div>
		<template #footer>
			<el-button @click="show = false">关闭</el-button>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import {videoRecognitionList, deleteVideoRecognition} from "/@api/yolo_model/hz-system-yolo-model-api";
import {ref, reactive} from 'vue'
import {ElMessageBox} from "element-plus";
import {useMessage} from "/@hooks/message";
import {translate} from '/@/utils/translate'
//弹窗显示详情
const show = ref(false)
const currentRow = ref({})
const openDetail = (row) => {
	currentRow.value = row
	show.value = true
}

//列表数据
const list = ref([])
const params = reactive({
	page: 1,
	page_size: 10,
})
const total = ref(0)
const getList = async ()=> {
	const res = await videoRecognitionList(params)
	list.value = res.data.records
	total.value = res.data.total
}
getList()


//页码变化
const pageChange = (page:number)=> {
	params.page = page
	getList()
}
const del = async (id: number)=> {
	await ElMessageBox.confirm(
		'确认删除所选记录吗?',
		'Warning',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	await deleteVideoRecognition(id)
	useMessage().success('删除成功!')
	await getList()
}

//表格多选事件
const seletIds = ref([])
const deleteAll = async ()=> {
	for(const id of seletIds.value){
		await deleteVideoRecognition(id)
	}
	useMessage().success(`${seletIds.value.length}条数据删除成功!`)
	await getList()
}

const handleSelectionChange = (val)=> {
	seletIds.value = val.map(item=>item.id)
}

const reload = ()=> {
	params.page = 1
	list.value = []
	getList()
}
</script>
<style scoped lang="scss">
.yolo{
	padding: 8px;
}

.detail{
	height: 380px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.inner{
		width: 49%;
		height: 100%;
		position: relative;
		video{
			height: 100%;
			width: 100%;
		}
	}
}
</style>
